<template>
    <view class="pg-center">
        <z-paging ref="paging" v-model="materialList" @query="queryList" auto-show-back-to-top back-to-top-threshold="400rpx" back-to-top-with-animate auto-show-system-loading>
            <template #top>
                <view class="w-750 fl-ro-cen bg-white pl-25">
                    <wd-button size="small" icon="add" @click="add">新增</wd-button>
                    <view class="w-700">
                        <wd-search v-model="searchValue" @search="search_start" @clear="search_clear" @change="search_change" focusWhenClear hide-cancel />
                    </view>
                </view>
            </template>
            <view class="w-750">
                <wd-cell-group>
                    <template v-for="(item, index) in materialList" :key="item.id">
                        <wd-cell size="large" border clickable @click="material_onclick(item, index)">
                            <template #title>
                                <view class="fl-ro-cen">
                                    <wd-text :text="item.name" color="#333" size="30rpx"></wd-text>
                                </view>
                            </template>
                            <template #label>
                                <wd-text :type="item.type == 1 ? 'primary' : 'success'" :text="item.type == 1 ? '图片' : '视频'" size="26rpx"></wd-text>
                            </template>
                            <template>
                                <wd-text :text="item.createTime" color="#c3c3c3" size="26rpx"></wd-text>
                            </template>
                        </wd-cell>
                    </template>
                </wd-cell-group>
            </view>
        </z-paging>
    </view>

    <wd-popup v-model="popupShow" position="bottom" :safe-area-inset-bottom="true" custom-class="fl-co-cen ju-cen">
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="preview">查看</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="edit">编辑</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="del">删除</text>
        <text class="w-750 fs-34 text-center p-20 bts-10" @click="cancel">取消</text>
    </wd-popup>

    <wd-popup v-model="addPopupShow" position="bottom" :safe-area-inset-bottom="true" custom-class="fl-co-cen ju-cen">
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="add_image">图片</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="add_video">视频</text>
        <text class="w-750 fs-34 text-center p-20 bts-10" @click="cancel">取消</text>
    </wd-popup>
</template>

<script setup>
    import { ref, nextTick } from 'vue';
    import { api_material_list, api_material_deleteByIds } from '@/api/material.js';
    import { onShow } from '@dcloudio/uni-app';

    const popupShow = ref(false); //点击列表底部弹窗
    const addPopupShow = ref(false); //点击新增底部弹窗
    const materialList = ref([]); //广告素材列表
    const searchValue = ref(''); //搜索栏的值
    const selectedMaterial = ref(null); //选中的素材
    const paging = ref(null);

    //加载数据
    const queryList = async (pageNo = 1, pageSize = 10) => {
        let queryMap = {
            eq: {},
            in: {},
            like: {},
            ge: {},
            le: {},
            order: {
                create_time: 'desc'
            }
        };
        if (searchValue.value != '') {
            queryMap.like.name = searchValue.value;
        }
        // 访问查询设备场地接口
        try {
            let res = await api_material_list({
                pageCut: true,
                pageNum: pageNo,
                pageSize: pageSize,
                queryMap: queryMap
            });
            paging.value.complete(res.data);
        } catch (error) {
            paging.value.complete(false);
            // uni.showToast({
            //     title: error.msg,
            //     icon: 'none'
            // });
        }
    };

    //点击新增
    const add = () => {
        console.log('点击新增');
        addPopupShow.value = true;
    };

    //选择新增图片
    const add_image = () => {
        console.log('点击新增图片');
        uni.navigateTo({
            url: '/pages/merchant/ad-manage/ad-material/upload-image/upload-image'
        });
        addPopupShow.value = false;
    };

    //选择新增视频
    const add_video = () => {
        console.log('选择新增视频');
        uni.navigateTo({
            url: '/pages/merchant/ad-manage/ad-material/upload-video/upload-video'
        });
        addPopupShow.value = false;
    };

    //搜索
    const search_start = () => {
        paging.value.reload();
    };

    //清空搜索
    const search_clear = () => {
        paging.value.reload();
    };

    //搜索失焦
    const search_change = () => {
        if (searchValue.value == '') {
            paging.value.reload();
        }
    };

    //点击素材列表
    const material_onclick = (item, index) => {
        console.log('点击了', index, item);
        selectedMaterial.value = item;
        popupShow.value = true;
    };

    //点击查看
    const preview = async () => {
        console.log('点击查看');
        console.log(selectedMaterial.value.filePath);
        //构造预览的资源
        let sources = [];
        sources.push({ url: selectedMaterial.value.filePath, type: selectedMaterial.value.type == 1 ? 'image' : 'video' });
        try {
            await uni.previewMedia({
                sources: sources,
                current: 0
            });
        } catch (error) {
            uni.showToast({
                title: '打开失败',
                icon: 'none'
            });
        }
        popupShow.value = false;
    };

    //点击编辑
    const edit = () => {
        console.log('点击编辑');
        popupShow.value = false;
    };

    //点击删除
    const del = () => {
        console.log('点击删除');
        uni.showModal({
            title: '确认删除',
            success: async (res) => {
                if (res.confirm) {
                    //调用删除的接口
                    try {
                        await api_material_deleteByIds([].concat(selectedMaterial.value));
                        paging.value.refresh();
                    } catch (error) {
                        uni.showToast({
                            title: error.msg,
                            icon: 'none'
                        });
                    }
                    popupShow.value = false;
                }
            }
        });
    };

    //点击取消 关闭弹窗
    const cancel = () => {
        popupShow.value = false;
        addPopupShow.value = false;
    };

    // onShow(() => {
    //     nextTick(() => {
    //         paging.value.reload();
    //     });
    // });
</script>

<style lang="scss" scoped>
    .txt {
        border-bottom: 1rpx solid #f8f8f8;
    }
</style>
